<template>
  <div>
    <van-skeleton :loading="loading">
      <template #template>
        <div :style="{ display: 'flex', width: '100%' }">
          <van-skeleton-image />
          <div :style="{ flex: 1, marginLeft: '16px' }">
            <van-skeleton-paragraph row-width="60%" />
            <van-skeleton-paragraph />
          </div>
        </div>
      </template>
    </van-skeleton>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="2" :border="false" :gutter="10">
      <van-grid-item v-for="value in gridList" :key="value">
        <img class="imgs" :src="value.img" alt="" />
        <span>{{ value.text }}</span>
      </van-grid-item>
      <!-- <van-grid-item v-for="value in gridList" :key="value">
        <img class="imgss" origin-src="https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448" alt="" />
        <img class="imgss" origin-src="https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448" alt="" />
        <img class="imgss" origin-src="https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448" alt="" />
        <img class="imgss" origin-src="https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448" alt="" />
        <span>{{ value.text }}</span>
      </van-grid-item> -->
    </van-grid>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
];
const gridList = [
  {
    img: "https://img0.baidu.com/it/u=2955332398,1712446780&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=500f1fdc0411ce9c603dd75c0cbb3448",
    text: "魅族 21 Note",
  },
  {
    img: "https://img2.baidu.com/it/u=4206823861,2043582464&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=46c9d4370c0cd056632024160d7a1cab",
    text: "魅族 21 PRO",
  },
  {
    img: "https://img0.baidu.com/it/u=1128422789,3129806361&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718989200&t=19af51f6994a90270ea04dfea0e238db",
    text: "魅族 21 Note",
  },
  {
    img: "https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
    text: "魅族 21 PRO",
  },
  {
    img: "https://tse4-mm.cn.bing.net/th/id/OIP-C.N0USLldg_iKDGVKT12vB4AHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    text: "魅族 21 Note",
  },
  {
    img: "https://tse3-mm.cn.bing.net/th/id/OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA?w=211&h=211&c=7&r=0&o=5&dpr=1.3&pid=1.7",
    text: "魅族 21 PRO",
  },
];

// window.onscroll = function() {
//     let t = document.documentElement.scrollTop
//     if(t>=1000){
//         let img = document.querySelectorAll('.imgss')
//         img.src = img.getAttribute('origin-src')
//     }
// }

const loading = ref(true);

onMounted(() => {
  loading.value = false;
});
</script>
<style scoped>
img {
  width: 100%;
  height: 200px;
}
.imgs {
  width: 100%;
  height: 300px;
}
.imgss {
  width: 100%;
  height: 300px;
}
</style>